<template>
  <div>
    <a-row :gutter="12">
      <a-col :span="12">
        <a-card :body-style="{ padding: '0 8px' }" title="项目资源" class="card">
          <a-list
            :size="'small'"
            item-layout="horizontal"
            :data-source="linkList"
            :bordered="false"
          >
            <template #renderItem="{ item }">
              <a-list-item @click="openLink(item.link)" class="cursor-pointer">
                <a-list-item-meta>
                  <template #title>
                    <div>{{ item.title }}</div>
                  </template>
                  <template #avatar>
                    <div class="text-center">
                      <a target="_blank" :href="item.link">
                        <img width="24" :src="getFavicon(item.link)" />
                      </a>
                    </div>
                  </template>
                </a-list-item-meta>
              </a-list-item>
              <a-flex wrap="wrap" :align="'center'" :gap="8"></a-flex>
            </template>
            <a-list-item>
              <a-list-item-meta title="移动端预览" description="正在进行中"></a-list-item-meta>
              <template #actions>
                <a-qrcode :size="80" :value="mobile" />
              </template>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
      <a-col :span="12" class="relative">
        <a-card class="card" :body-style="{ paddingTop: '0' }">
          <a-tabs>
            <template #rightExtra>
              <a-button type="link" href="https://gitee.com/in-git/ax.git" target="_blank">
                前往Star
                <LinkOutlined />
              </a-button>
            </template>
            <!-- 展示不同类型的用户 -->
            <a-tab-pane key="watch" tab="核心成员">
              <RenderItem :data="watchUsers"></RenderItem>
            </a-tab-pane>
            <a-tab-pane key="star" tab="Star 用户">
              <RenderItem :data="starUsers"></RenderItem>
            </a-tab-pane>
          </a-tabs>
        </a-card>
        <Banner />
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { getFavicon } from '@/api/utils/image';
import { openLink } from '@/utils/common/utils';
import { getStarUsers, starUsers } from '../data/star.request';
import { getWatchUsers, watchUsers } from '../data/watch.request';
import { linkList } from '../data/options';
import Banner from '../banner/Banner.vue';
import RenderItem from './RenderItem.vue';
/* 读取开发模式，如果是本地，则不加载gitee */
const isDev = import.meta.env.MODE === 'development';
const mobile = ref(`http://150.158.14.110:8001/`);
onMounted(() => {
  if (!isDev) {
    getWatchUsers();
    getStarUsers();
  }
});
</script>

<style lang="scss" scoped>
:deep(.ant-card) {
  box-shadow: none;
}
:deep(.ant-card-body) {
  height: 100%;
}

.tips {
  text-align: center;
  width: 100%;
  color: #999;
  position: relative;
  width: 100%;
  margin-top: 12px;
}
.item,
.user-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
